HTML List Tag
HTML Lists let you group related items together in an organized way. HTML supports three types of lists: Unordered List (<ul>), Ordered List (<ol>) and Description List (<dl>).
What is an HTML List?
- Lists are used to group related items in a structured manner.
<ul>creates a bullet-point list (unordered).<ol>creates a numbered list (ordered).<dl>creates a description list with terms and definitions.
Why Use HTML Lists?
Organized Content
Lists make information clean, scannable and easy to read.
Numbered Steps
Ordered lists are perfect for instructions and sequences.
Bullet Points
Unordered lists work well for features, benefits and tags.
Definitions
Description lists pair terms with their meanings.
Styling Friendly
Lists can be styled with CSS for menus, cards and grids.
Accessible
Screen readers announce list items so users know how many items exist.
Syntax of HTML Lists
- Unordered List:
<ul> <li>Item</li> </ul> - Ordered List:
<ol> <li>Step</li> </ol> - Description List:
<dl> <dt>Term</dt> <dd>Definition</dd> </dl> - Lists can be nested to create multi-level menus and outlines.
- Use the
typeattribute on<ol>to change numbering (1, A, a, I, i).
HTML List Example
<!DOCTYPE html>
<html>
<body>
<h3>Unordered List</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Open editor</li>
<li>Write HTML</li>
<li>Save file</li>
</ol>
</body>
</html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| <ul> | Defines an unordered (bulleted) list. |
| <ol> | Defines an ordered (numbered) list. |
| <li> | Defines a single list item inside ul or ol. |
| <dl> | Defines a description list. |
| <dt> | Defines a term inside a description list. |
| <dd> | Defines the description of the term. |
Types of Lists
Use Cases
- Navigation Menus: Built using
<ul>styled with CSS. - Tutorials: Step-by-step guides use
<ol>. - Feature Lists: Product features displayed via
<ul>. - Glossaries:
<dl>pairs words and meanings.
Practice Questions
- Create an unordered list of your 5 favorite colors.
- Build an ordered list of steps to make tea.
- Create a nested list — main course outline with sub-topics.
- Use
type="A"in<ol>to display alphabet numbering.
Frequently Asked Questions
How many types of lists are there in HTML?
Three types: Unordered (ul), Ordered (ol), and Description (dl) lists.
What is the difference between ol and ul?
ol creates numbered lists; ul creates bulleted lists.
Can lists be nested?
Yes, you can place a list inside another list to create multi-level structures.
How do I change list bullets style?
Use the CSS property list-style-type or the type attribute in HTML.
Conclusion
HTML lists are powerful tools to organize and present grouped information. Whether you need bullets, numbers, or term-definition pairs, lists make content clean, accessible, and easy to scan.
Additional Tips
- Use lists for menus: Most navigation menus are built with
<ul>. - Keep items parallel: All
<li>items should be similar in style. - Style with CSS: Remove default markers using
list-style:none. - Use nesting carefully: Too many nested levels make content hard to read.